<template>
  <div class="homeListContainer">
    <homeHeader :categoryList="categoryList"></homeHeader>
    <!-- swiper轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="floor in otherFloorList" :key="floor.id">
        <a :href="floor.targetUrl"><img style="width: 100%" :src="floor.picUrl" /></a>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图下的数据 -->
    <div class="otherListMain" v-for="(category,index) in categoryItemList" :key="index">
      <p>{{category.category.name}}</p>
      <p>{{category.category.frontName}}</p>
      
      <van-row class="otherListRow">
        <van-col span="12" v-for="item in category.itemList" :key="item.id">
          <div class="otherListColMain">
            <img style="width: 4.53rem;background-color: #f4f4f4; border-radius: .27rem; " :src="item.listPicUrl">
            <p>{{item.name}}</p>
            <span class="newPrice">￥{{item.retailPrice}}</span>
            <span class="oldPrice" v-if="item.counterPrice">￥{{item.counterPrice}}</span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import {type CateGoryList} from '../../../api/home'
import homeListApi,{type OtherChannelList , type CategoryItemListModel} from '../../../api/homeList'
// import { useRouter } from 'vue-router';
// const router = useRouter()
const route = useRoute()

// 获取tab栏数据
const categoryList = ref<CateGoryList>([])

// 获取其他频道轮播图数据
const otherFloorList = ref<OtherChannelList>([])

// 存储某个频道的商品列表数据
const categoryItemList = ref<CategoryItemListModel>([])

// tab栏相关回调
const getCategoryListData = (async () => {
  // console.log('111',route.query.categoryId);
  
  try {
    let res = await homeListApi.getOtherChannel(route.query.categoryId as any)
    // 更新tab栏数据
    categoryList.value = res.data.categoryList
    // 更新其他频道轮播图
    otherFloorList.value = res.data.currentCategory.bannerList
    // 存储某个频道的商品列表数据
    categoryItemList.value = res.data.categoryItemList
    // console.log('@@',categoryItemList.value);
    // console.log(res.data);
    
  } catch (error) {
    console.log(error);
  }
})


onMounted(() => {
  getCategoryListData()
})
</script>

<style scoped>
/* 轮播图 */
.my-swipe {
  height: 3.97rem;
  margin-top: -0.13rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: .53rem;
  text-align: center;
}

/* 轮播图下的列表展示 */
/* .otherListMain{
  
} */
.otherListMain p{
  text-align: center;
  line-height: .61rem;
}
.otherListMain > p:nth-child(1){
  font-size: .43rem;
  padding-top: .53rem;
}
.otherListMain > p:nth-child(2){
  font-size: .32rem;
  color: #999;
}

.otherListMain .otherListRow{
  margin-top: .21rem;
  margin-left: .27rem;
  
}
.otherListMain .otherListRow .otherListColMain{
  width: 4.6rem;
  height: 7.38rem;
}
.otherListMain .otherListRow .otherListColMain p{
  font-size: .37rem;
  text-align: left;
}
.otherListMain .otherListRow .otherListColMain .newPrice{
  color: red;
  font-size: .43rem;
  font-weight: bold;
}
.otherListMain .otherListRow .otherListColMain .oldPrice{
  color: #999;
  text-decoration:line-through;
  font-size: .32rem;
}
</style>